<template>
  <div>
    <el-container class="home_container">
      <el-header class="header">
        <el-col :span="1" class="hideRest"v-show="collapsed"></el-col>
        <el-col :span="10" class="logo" v-show="!collapsed">
          {{sysName}}
        </el-col>
        <el-col :span="10" class="headerTopCenter" :class="[collapsed ? 'ml64' : '']">
          <div class="tools" @click.prevent="collapse" :class="[collapsed ? 'pl0' : '']">
            <i class="iconfont icon-align-justify"></i>
          </div>
        </el-col>
        <el-col :span="4" class="userinfo">
          <el-dropdown trigger="hover"  @command="dropdownRouterPush">
            <span class="el-dropdown-link userinfo-inner">{{userInfoDetail.realName}}</span>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item command="" @click.native="logout">退出登录</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </el-col>
      </el-header>
      <el-container class="main">
        <el-aside class="aside" style="width: auto;" :class="[collapsed ? 'overVis' : '']">
          <!--导航菜单-->
          <el-menu :default-active="$route.path" @open="handleopen" @close="handleclose"
                   @select="handleselect"
                   background-color="#001529"
                   :collapse="collapsed"
                   text-color="hsla(0,0%,100%,.65)"
                   unique-opened router style="height: 100%;">
            <template v-for="(item,index) in $router.options.routes" v-if="!item.hidden">
              <el-submenu :index="index+''" v-if="!item.leaf">
                <template slot="title">
                  <i :class="item.iconCls"></i>
                  <span slot="title">{{item.name}}</span>
                </template>
                <el-menu-item v-for="child in item.children" :index="child.path" :key="child.path" v-if="!child.hidden">
                  {{child.name}}
                </el-menu-item>
              </el-submenu>
              <el-menu-item v-if="item.leaf&&item.children.length>0" :index="item.children[0].path">
                <i :class="item.iconCls"></i>
                <span slot="title">{{item.children[0].name}}</span>
              </el-menu-item>
            </template>
          </el-menu>
        </el-aside>
        <el-main class="content-container" style="background-color: #F0F2F5;">
          <div class="grid-content bg-purple-light">
            <el-col :span="24" class="breadcrumb-container">
              <!--<strong class="title">{{$route.name}}</strong>-->
              <el-breadcrumb separator="/" class="breadcrumb-inner">
                <el-breadcrumb-item v-for="item in $route.matched" :key="item.path">
                  {{ item.name }}
                </el-breadcrumb-item>
              </el-breadcrumb>
            </el-col>
            <el-col :span="24" class="content-wrapper">
              <transition name="el-fade-in" mode="out-in">
                <router-view></router-view>
              </transition>
            </el-col>
          </div>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>
  import { mapState, mapActions } from 'vuex'

  export default {
    data () {
      return {
        sysName: '管理平台',
        collapsed: false,
        form: {
          name: '',
          region: '',
          date1: '',
          date2: '',
          delivery: false,
          type: [],
          resource: '',
          desc: ''
        }
      }
    },
    computed: {
      ...mapState({
        userInfo (state) {
          if (!state.user.userInfo.name) {
            this.$store.commit('user/setUserInfoLocal', {})
          }
          return state.user.userInfo
        },
        userInfoDetail: state => state.user.userInfoDetail
      })
    },
    async mounted () {
      this.getUserInfoDetail()
    },
    methods: {
      ...mapActions('user', [
        'getUserInfoDetail'
      ]),
      onSubmit () {
        console.log('submit!')
      },
      handleopen () {
        // console.log('handleopen');
      },
      handleclose () {
        // console.log('handleclose');
      },
      handleselect (a, b) {
      },
      // 下拉菜单跳转
      dropdownRouterPush (routeName) {
        if (routeName) {
          this.$router.push(routeName)
        }
      },
      // 退出登录
      logout: function () {
        var _this = this
        this.$confirm('确认退出吗?', '提示', {
          // type: 'warning'
        }).then(() => {
          sessionStorage.removeItem('user')
          _this.$router.push('/login')
        }).catch(() => {
        })
      },
      // 折叠导航栏
      collapse: function () {
        this.collapsed = !this.collapsed
      },
      showMenu (i, status) {
        this.$refs.menuCollapsed.getElementsByClassName('submenu-hook-' + i)[0].style.display = status ? 'block' : 'none'
      }
    }
  }
</script>

<style lang="stylus">
  @import "../../style/theme.styl"

  .home_container
    height 100vh
    display: flex
    flex-direction column
    .header
      line-height: 60px;
      color: #fff;
      background: color-primary;
      padding: 0
      .userinfo
        text-align: right;
        padding-right: 35px;
        float: right;
        .userinfo-inner
          cursor: pointer;
          color: #333;
          img
            width: 40px;
            height: 40px;
            border-radius: 20px;
            margin: 10px 0px 10px 10px;
            float: right;
      .logo
        width: 250px;
        height: 60px;
        font-size: 18px;
        padding-left: 20px;
        padding-right: 20px;
        border-color: rgba(238, 241, 146, 0.3);
        border-right-width: 1px;
        border-right-style: solid;
        background-color: color_header_top_left
        img
          width: 40px;
          float: left;
          margin: 10px 10px 10px 18px;
        .txt
          color: #fff
      .logo-width
        width: 230px
      .logo-collapse-width
        width: 60px
      .tools
        padding: 0px 23px;
        width: 14px;
        height: 60px;
        line-height: 60px;
        cursor: pointer;
        &.pl0
          padding-left: 0

    .main
      overflow: hidden;
      .aside
        overflow auto
        &.overVis
          overflow visible
        .el-menu-item, .el-submenu__title
          &:focus
            background-color: #1890ff!important
            color: #fff
          &:hover
            /*background-color: #1890ff!important*/
            color: #fff
          &.is-active
            color: #fff
            background-color: #1890ff!important
        .el-submenu
          .el-menu-item
            background-color: #111!important
            &:focus
              background-color: #1890ff!important
              color: #fff!important
            &:hover
              /*background-color: #1890ff!important*/
              color: #fff!important
            &.is-active
              color: #fff
              background-color: #1890ff!important
        .el-menu:not(.el-menu--collapse) {
          width: 250px;
        }
      .breadcrumb-container
        overflow: hidden
        .title
          float: left
          font-size: 14px
        .breadcrumb-inner
          float: right
      .content-container
        background-color: #fff
  .headerTopCenter
    color: #000
    &.ml64
      padding-left: 20px
  .hideRest
    background-color: color_header_top_left
    width: 64px
    height: 60px
</style>
